<template>
  <div class="home-page">
    <div class="home-top">
      <div class="top-logo">
        <img src="~assets/img/alllogo.png"  alt="" />
      </div>
      <div class="top-tab">
        <ul>
          <li v-for="item in tabList" :key="item.id" @click="goPath(item.title)">
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="top-search">
        <el-input
          placeholder="查找您要的宝贝"
          @keyup.enter.native="searchItem()"
          v-model="keyword"
          class="input-find"
        >
          <el-button
            slot="append"
            @click="searchItem"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="caro-conetnt">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in imgList" :key="item.path">
          <h3 class="medium" @click="goPath(item.path)">
            <img :src="item.img" alt="" />
          </h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="goods-content">
      <h1>校园以物易物</h1>
      <p>轻松交易</p>
      <div class="goods-caro">
        <div
          class="goods-item"
          @click="goPath(item.path)"
          v-for="item in goodsList"
          :key="item.path"
        >
          <img :src="item" alt="" />
        </div>
      </div>
    </div>
    <news-info></news-info>
    <div class="goods-team">
      <h1>专业的团队</h1>
      <p>为你保驾护航</p>
      <div class="goods-team-box">
        <div
          class="goods-team-item"
          v-for="(item, index) in teamList"
          :key="index"
        >
          <img :src="item.img" alt="" />
          <div>{{ item.title }}</div>
          <div>{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="house-box">
      <div
        class="house-item"
        v-for="item in houseList"
        @click="
          goinfo(
            item.id,
            item.title,
            item.desc,
            item.user.name,
            item.user.id,
            item.condition,
            item.img
          )
        "
        :key="item.id"
      >
        <div class="house-img"><img :src="http + item.img" alt="" /></div>
        <div class="house-name">{{ item.title }}</div>
        <div class="house-info">{{ item.desc }}</div>
        <div class="house-info">交换者:{{ item.user.name }}</div>
        <div class="house-name">交换条件:{{ item.condition }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import NewsInfo from "components/NewsInfo.vue";
import { getoldPhone, setGoodsfl } from "network/request.js";
export default {
  components: {
    NewsInfo,
  },

  data() {
    return {
      tabList: [],
      houseList: [],
      http: "https://a2.ngrok.kjjvip.com",
      keyword: "",
      imgList: [
        {
          img:
            "http://img20.360buyimg.com/aotucms/jfs/t1/132647/21/7459/27711/5f3e2546E34206879/2a3a64e687979ab0.jpg",
          path: 1,
        },
        {
          img:
            "http://img14.360buyimg.com/aotucms/jfs/t1/69607/12/9352/69301/5d71d5abE6b90190d/95a07d5515f68e67.jpg",
          path: 2,
        },
        {
          img:
            "http://img20.360buyimg.com/aotucms/jfs/t1/62180/6/9339/94314/5d70d752Ec9564733/9f315aed77ccc5e1.jpg",
          path: 3,
        },
        {
          img:
            "http://img12.360buyimg.com/aotucms/jfs/t1/76114/7/9254/74198/5d71d9d7Eeffa6673/08e741e2da21f3c1.jpg",
          path: 4,
        },
      ],
      goodsList: [
        { path: 1, img_url: require("../assets/img/goods1.png") },
        { path: 2, img_url: require("../assets/img/goods2.png") },
        { path: 3, img_url: require("../assets/img/goods3.png") },
        { path: 4, img_url: require("../assets/img/goods4.png") },
      ],
      teamList: [
        {
          img: require("../assets/img/touzi.svg"),
          title: "学校投资",
          content: "负责担保 真实有效",
        },
        {
          img: require("../assets/img/hezuo.svg"),
          title: "Y优购&重工",
          content: "联合制定为每一件商品评估",
        },
        {
          img: require("../assets/img/buy.svg"),
          title: "精准定位",
          content: "让你买得放心",
        },
        {
          img: require("../assets/img/sell.svg"),
          title: "真实个人",
          content: "让你卖得安心",
        },
      ],
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getphone();
  },
  methods: {
    //卖东西

    getitem(path) {
      this.$router.push(`/NiceBuy/${path}`);
    },
    // 手机点击进入详情
    goinfo(gid, title, desc, sname, sid, condition, img) {
      // this.$router.push(`/Goods/${gid}/${title}/${desc}/${sname}/${sid}`)
      this.$router.push({
        path: "/Goods",
        query: {
          gid: gid,
          title: title,
          desc: desc,
          sname: sname,
          sid: sid,
          condition: condition,
          simg: img,
        },
      });
    },
    // 获取手机列表
    async getphone() {
      const { data: res } = await getoldPhone();
      this.houseList = res.content.data;
      const { data: res1 } = await setGoodsfl();
      this.tabList = res1.content;
      console.log(res);
    },
    searchItem() {
      if (this.keyword == "") {
        return this.$message.warning("请输入商品名称！");
      }
      this.$router.push({ path: "/NiceBuy", query: { title: this.keyword } });
    },
    goPath(title) {
      this.$router.push({ path: "/NiceBuy", query: { title: title } });

    },
  },
};
</script>

<style lang="scss" scoped>
.home-page {
  margin-top: 40px;
  .home-top {
    height: 80px;
    width: 70%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .top-logo {
      flex: 1;
      text-align: center;
      img {
        // width: 60px;
        width: 30%;
      }
    }

    .top-tab {
      flex: 3;
      ul {
        display: flex;
        list-style: none;
        li {
          margin: 0px 10px;
          padding: 3px;
          border-radius: 40px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }

        li:nth-child(1) {
          background-color: red;
          opacity: 0.7;
          color: #fff;
          &:hover {
            color: #eee;
          }
        }
        li:nth-child(2) {
          background-color: skyblue;
          opacity: 0.8;
          color: #fff;
          &:hover {
            color: #eee;
          }
        }
      }
    }
  }
  .caro-conetnt {
    width: 80%;
    margin: 0 auto;
  }
  .goods-content {
    width: 80%;
    margin: 0 auto;
    h1,
    p {
      margin-top: 30px;
      text-align: center;
    }
    .goods-caro {
      margin-top: 30px;
      display: flex;
      .goods-item {
        margin: 0px 10px;
        &:hover {
          cursor: pointer;
          transition: all 0.5s;
          transform: scale3d(1.2, 1.2, 1);
        }
        img {
          width: 100%;
        }
      }
    }
  }

  .goods-team {
    padding: 50px;
    background-color: #eee;
    text-align: center;
    h1 {
    }

    p {
      padding-bottom: 20px;
    }

    .goods-team-box {
      display: flex;
      justify-content: space-around;
      .goods-team-item {
        div {
          font-size: 18px;
          margin-top: 10px;
          &:nth-child(3) {
            color: #aaa;
          }
        }
        img {
          width: 80px;
        }
      }
    }
  }
}

.house-box {
  border: 1px solid #eee;
  width: 80%;
  margin: 0 auto;
  padding: 30px 0px;
  display: flex;
  flex-wrap: wrap;
  .house-item {
    &:hover {
      border: 1px solid #aaa;
      border-radius: 10px;
      transition: 0.4 all;
      transform: scale3d(1.01, 1.01, 1);
      cursor: pointer;
      box-shadow: 10px 10px 15px #ccc;
    }
    margin: 1%;
    width: 20%;
    .house-img {
      width: 100%;
      img {
        border-radius: 10px;
        width: 100%;
      }
    }
    .house-name {
    }
    .house-info {
      color: #aaa;
      font-size: 12px;
    }
    .house-price {
      font-size: 28px;
      color: #ff6600;
    }
  }
}
</style>